<template>
	<div class="container">
		<v-header :title="title"></v-header>
		<div class="publicityMap">
			<div class="publicityMap-list" v-for="(item, index) in list">
				<div class="publicityMap-list-item" :style="{backgroundImage: 'url(' + item.backgroundImg + ')' }">
					<div class="publicityMap-list-item-delete" @click.stop="alert(index)">
						<img src="../../common/images/10delete-.png"/>
					</div>
					<div class="publicityMap-list-item-add">
						<img src="../../common/images/1-1add-.png"/>
						<input type='file' accept='image/*' capture='camera' ref="addImg" class="getImg" @change="addImg(index)"/>
					</div>
				</div>
			</div>
			<div class="publicityMap-btn" @click="addListItem">
				添加顶部宣传图
			</div>
			<div class="publicityMap-explain">
				<div class="explain-item">
					<img src="../../common/images/explain.png"/>
					<div>点击“+”更换顶部宣传图（建议图片宽1080px 高300px-400px）</div>
				</div>
				<div class="explain-item">
					<img src="../../common/images/explain.png"/>
					<div>设置多张宣传图，应当所有上传图片高度一致</div>
				</div>
			</div>
			<div class="publicityMap-submit" @click="$router.goBack(-2)">
				保存
			</div>
		</div>
	</div>
</template>

<script>
	import VHeader from 'components/v-header'
	import VMask from 'components/v-mask'
	import Loading from 'components/loading'
	import BottomBar from 'components/bottom-bar'
	
	export default {
		components: {
			BottomBar,
			Loading,
			VMask,
			VHeader
		},
		data() {
			return {
				title: '顶部宣传图',
				list:[]
			}
		},
		methods: {
			alert(num) {
				var _this = this
				mui.confirm('', '是否删除', ['是','否'], function(e) {
					if(e.index == 0) {
						_this.list.splice(num, 1)
					}
				})
			},
			addImg(index) {
				var _this = this
				var reader = new FileReader();
				reader.readAsDataURL(this.$refs.addImg[index].files[0]);
				reader.onload=function(e) {
			        _this.list[index].backgroundImg = e.target.result;
			    };
			},
			addListItem() {
				var item = {
					backgroundImg: ''
				}
				this.list.push(item)
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

	.container
		position fixed
		display flex
		flex-direction column
		width 100%
		height 100%
		background $color-bg-gray
		.publicityMap
			overflow-y scroll
			.publicityMap-list
				.publicityMap-list-item
					margin-top 10px
					background #ccc
					position relative
					background-size 100% 100%
					background-repeat no-repeat
					height 120px
					.publicityMap-list-item-delete
						width 100%
						text-align right
						padding 10px 10px 0 0
						img
							width 20px
							height 20px
					.publicityMap-list-item-add
						width 100%
						text-align center
						img
							width 40px
							height 40px
					.getImg {
						position absolute
						top 30%
						left 45%
						width 40px
						height 40px
						opacity 0
					}
			.publicityMap-btn
				width 100%
				padding 15px 0
				text-align center
				color $color-theme
				margin 25px 0
				background #fff
			.publicityMap-explain
				.explain-item
					align-items center
					/*justify-content center*/
					padding-left 10px
					display flex
					width 100%
					font-size $font-size-mini
					color #ccc
					img
						width 15px
						height 15px
						margin-right 10px
			.publicityMap-submit
				margin 20px auto
				padding 15px
				width 300px
				text-align center
				color #fff
				background $color-theme
				border-radius 3px
</style>